<template>
    <div class="xkl-container">
        <div v-for="slotname in topSlots" :key="slotname"
            :class="['pd-' + defaultValue(padding, 20), 'mb-' + defaultValue(gap, 20)]"
            :style="{ backgroundColor: defaultValue(backgroundColor, '#fff') }">
            <slot :name="slotname"></slot>
        </div>
        <div :class="['pd-' + defaultValue(padding, 20), 'mb-' + defaultValue(gap, 20)]"
            :style="{ backgroundColor: defaultValue(backgroundColor, '#fff') }">
            <slot></slot>
        </div>
        <div v-for="slotname in bottomSlots" :key="slotname"
            :class="['pd-' + defaultValue(padding, 20), 'mb-' + defaultValue(gap, 20)]"
            :style="{ backgroundColor: defaultValue(backgroundColor, '#fff') }">
            <slot :name="slotname"></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

defineOptions({ name: 'XklContainer' })
interface ContainerProps {
    topSlots?: string[]
    bottomSlots?: string[]
    backgroundColor?: string,
    gap?: number,
    padding?: number
}

const props = defineProps<ContainerProps>()

const { topSlots, bottomSlots, backgroundColor, gap, padding } = props

const defaultValue = computed(() => {
    return (val, defaultVal) => {
        return val || defaultVal
    }
})
</script>
<style lang="scss" scoped></style>